import {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';
import legacy from '@vitejs/plugin-legacy';
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers';

import {resolve} from 'path';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue({}),
        // 浏览器兼容
        legacy({
            targets: ['defaults', 'not IE 11'],
            additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
        }),
        // svg动态加载
        createSvgIconsPlugin({
            iconDirs: [resolve(process.cwd(), 'src/icons')],
            symbolId: 'icon-[dir]-[name]',
        }),
        // 自动导入
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: ElementPlusResolver({
                importStyle: 'sass',
            }),
        }),
    ],
    server: {
        hmr: true,
        port: 8083,
    },
    css: {
        preprocessorOptions: {
            scss:{
                additionalData: `@use "@/styles/var.scss" as *;`,
            },
        },
    },
    resolve: {
        alias: {
            '@': resolve(__dirname, 'src'),
        },
        extensions: ['.js', '.json', '.ts', '.html'],
    },
    build: {
        reportCompressedSize: false,
        /** 消除打包大小超过 500kb 警告 */
        chunkSizeWarningLimit: 2000,
        /** vite 2.6.x 以上需要配置 minify: terser，terserOptions 才能生效 */
        minify: 'terser',
        /** 在 build 代码时移除 console.log、debugger 和 注释 */
        terserOptions: {
            compress: {
                drop_console: false,
                drop_debugger: true,
                pure_funcs: ['console.log'],
            },
            output: {
                /** 删除注释 */
                comments: false,
            },
        },
        /** 打包后静态资源目录 */
        assetsDir: 'static/img/',
        rollupOptions: {
            output: {
                chunkFileNames: 'static/js/[name]-[hash].js',
                entryFileNames: 'static/js/[name]-[hash].js',
                assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
            },
        },
    },
});
